<script>
export default {
  data () {
    return {
      // AchievemebtItems: ['icon-ewairenwuchengjiuhuisetian', 'icon-heibaidatubiao',
      //   'icon-heibaitianjin', 'icon-heibaihangzhou', 'icon-heibaifuzhou', 'icon-heibainanjing',
      //   'icon-heibaishanghai', 'icon-ewairenwuchengjiuhuisetian4', 'icon-ewairenwuchengjiuhuisetian2',
      //   'icon-caisechengdu', 'icon-heibaibeijing', 'icon-lijiang', 'icon-shenzhen', 'icon-xianbowuguan', 'icon-luoyang', 'icon-wulumuqi'],
      // AchievemebtItemNameNo: ['icon-ewairenwuchengjiutian4', 'icon-caise-datubiao',
      //   'icon-caisetianjin', 'icon-caisehangzhou', 'icon-caisefuzhou', 'icon-caisenanjing',
      //   'icon-caiseshanghai', 'icon-ewairenwuchengjiutian1', 'icon-ewairenwuchengjiutian2',
      //   'icon-heibaichengdu', 'icon-caisebeijing', '', '', '', '', '']
      AchievemebtItemIcons: [
        { id: 1, name: 'icon-hefeiditie', cs: 'icon-hefeiditie' },
        { id: 2, name: 'icon-hainanhangkong_HU', cs: 'icon-hainanhangkong_HU' },
        { id: 3, name: 'icon-liuzhouyinhang', cs: 'icon-liuzhouyinhang' },
        { id: 4, name: 'icon-beijing', cs: 'icon-beijing' },
        { id: 5, name: 'icon-anyangyinhanglogo', cs: 'icon-anyangyinhanglogo' },
        { id: 6, name: 'icon-nanjing', cs: 'icon-nanjing' },
        { id: 7, name: 'icon-zhengzhou', cs: 'icon-zhengzhou' },
        { id: 8, name: 'icon-kejijinrong', cs: 'icon-kejijinrong' },
        { id: 9, name: 'icon-haerbin', cs: 'icon-haerbin' },
        { id: 10, name: 'icon-tianjin', cs: 'icon-tianjin' },
        { id: 11, name: 'icon-huashan', cs: 'icon-huashan' },
        { id: 12, name: 'icon-lijiang', cs: 'icon-lijiang' },
        { id: 13, name: 'icon-shenzhen', cs: 'icon-shenzhen' },
        { id: 14, name: 'icon-xianbowuguan', cs: 'icon-xianbowuguan' },
        { id: 15, name: 'icon-luoyang', cs: 'icon-luoyang' },
        { id: 16, name: 'icon-wulumuqi', cs: 'icon-wulumuqi' }
      ]
    }
  }
}
</script>
<template>
  <div class="contentRight">
    <h2>成就勋章</h2>
    <div class="partition"></div>
    <div class="down">
      <div class="AchievemebtItem" v-for="item in AchievemebtItemIcons" :key="item.id">
        <span class="iconfont" :class="item.name" style="font-size: 80px;"></span>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.contentRight {
  height: 100%;
  padding: 20px;
  .partition {
    background-color: black;
    height: 1px;
    width: 100%;
  }
  .down {
    margin-top: 20px;
    text-align: center;
    padding-top: 10px;
    .AchievemebtItem {
      display: inline-block;
      margin-top: 20px;
      margin-right: 5%;
      width: 20%;
      height: 100px;
      border-radius: 20px;
    }
    div:nth-child(4n){
        margin-right: 0px;
    }
  }
}
</style>
